<template>
  <div class="pagination">
    <el-pagination
      :current-page.sync="page.page"
      :page-size.sync="page.pageSize"
      :page-sizes="[5, 10, 20, 60, 100, 200]"
      :total="page.total"
      @current-change="search"
      @size-change="search"
      background
      layout="total,sizes, prev, pager, next, jumper"
    ></el-pagination>
  </div>
</template>

<script>
export default {
  name: "pagination",
  props: {
    page: {
      type: Object,
      required: true
    },
    search: {
      type: Function,
      required: true
    }
  },
  watch: {
    page(val) {
      this.$emit("update:page", val);
    }
  }
};
</script>
